<template>
  <div class="v-app" v-if="show">
    <div class="banner-container">
      <img src="@/assets/images/app/iphone_6_flat_white.png" class="mobile-img" alt="">
      <button class="to-android btn-gradient" type="button" @click="hrefTo('https://play.google.com/store/apps/details?id=com.thaifintech.thishop')">Android</button>
      <img src="@/assets/images/app/elephant.png" class="qr-code-img" alt="">
      <!-- 关闭按钮 -->
      <div class="icon-close" @click="show = false"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true // 是否显示整个遮罩
    }
  },
  methods: {
    hrefTo (href) {
      location.href = href
    }
  }
}
</script>

<style scoped>
.v-app {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: rgba(0, 0, 0, .7);
  z-index: 9999;
}
.v-app .banner-container {
  position: relative;
  width: 1200px;
  height: 120px;
  margin: 0 auto;
  background: url(../../assets/images/app/banner.jpg) no-repeat;
}
.mobile-img {
  position: absolute;
  top: -56px;
  left: 60px;
  border-radius: 25px;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .08);
}

.to-android {
  width: 142px;
  height: 50px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: absolute;
  top: 35px;
  right: 250px;
}

.to-android:before {
  content: '';
  display: block;
  width: 22px;
  height: 26px;
  background: url(../../assets/images/app/android.png) no-repeat center;
  position: absolute;
  top: 12px;
  left: 10px;
}

.to-android:after {
  content: '';
  display: block;
  width: 14px;
  height: 16px;
  background: url(../../assets/images/app/icon_download.png) no-repeat center;
  position: absolute;
  top: 17px;
  right: 15px;
}

.qr-code-img {
  position: absolute;
  top: -65px;
  right: 77px;
}

.icon-close {
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, .3);
  border-radius: 50%;
  transform: rotate(45deg);
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 12px;
}

.icon-close:hover {
  background-color: rgba(0, 0, 0, .5);
}

.icon-close:before, .icon-close:after {
  content: '';
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-close:before {
  width: 17px;
  height: 2px;
}

.icon-close:after {
  width: 2px;
  height: 17px;
}
</style>

